package com.example.bloom.ui.page

import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.bloom.model.defaultPlantThemes
import com.example.bloom.model.homeGardenThemes
import com.example.bloom.ui.theme.BloomTheme
import com.example.bloom.ui.widget.HomeGardenListItem
import com.example.bloom.ui.widget.PlantThemeCard

@Composable
fun HomeScreen() {
    Scaffold(
        bottomBar = {
            BloomBottomBar()
        }
    ) {
        HomeScreenContent(it)
    }
}

@Composable
private fun BloomBottomBar() {
    BottomAppBar(
        backgroundColor = MaterialTheme.colors.background
    ) {
        BloomBottomBarItem(false, Icons.Default.Home, "Home")
        BloomBottomBarItem(false, Icons.Default.FavoriteBorder, "Favorites")
        BloomBottomBarItem(false, Icons.Default.AccountCircle, "Profile")
        BloomBottomBarItem(false, Icons.Default.ShoppingCart, "Cart")
    }
}

@Composable
private fun RowScope.BloomBottomBarItem(
    selected: Boolean,
    icon: ImageVector,
    labelText: String,
) {
    BottomNavigationItem(
        selected = selected,
        onClick = { /*TODO*/ },
        icon = {
            Icon(
                icon,
                contentDescription = null
            )
        },
        label = {
            Text(labelText)
        }
    )
}

@Composable
private fun HomeScreenContent(paddingValues: PaddingValues) {
    Surface(
        color = MaterialTheme.colors.background,
        modifier = Modifier
            .fillMaxSize(),
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
                .padding(paddingValues)
        ) {
            SearchInput()
            BrowseTheme()
            HomeGardenSection()
        }
    }
}

@Composable
private fun HomeGardenSection() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .padding(horizontal = 16.dp)
    ) {
        Text(
            text = "Design your home garden",
            style = MaterialTheme.typography.h1,
            modifier = Modifier
                .paddingFromBaseline(40.dp, 16.dp)
                .weight(1f),
        )
        Icon(
            Icons.Default.FilterList,
            contentDescription = "Filter",
            modifier = Modifier
                .size(24.dp)
                .offset(y = 10.dp)
        )
    }
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier
            .padding(horizontal = 16.dp)
    ) {
        homeGardenThemes.forEach {
            HomeGardenListItem(plantTheme = it)
        }
    }
}

@Composable
private fun BrowseTheme() {
    Text(
        text = "Browse themes",
        style = MaterialTheme.typography.h1,
        modifier = Modifier
            .paddingFromBaseline(32.dp, 16.dp)
            .padding(start = 16.dp),
    )
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier
            .horizontalScroll(rememberScrollState())
            .padding(horizontal = 16.dp)
    ) {
        defaultPlantThemes.forEach {
            PlantThemeCard(plantTheme = it)
        }

    }
}

@Composable
private fun SearchInput() {
    OutlinedTextField(
        value = "",
        onValueChange = {

        },
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 16.dp, start = 16.dp, end = 16.dp),
        leadingIcon = {
            Icon(
                Icons.Default.Search,
                contentDescription = "",
                modifier = Modifier
                    .size(18.dp),
            )
        },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedLabelColor = MaterialTheme.colors.primary,
        ),
        label = {
            Text("Search")
        }
    )
}

@Preview
@Composable
fun PreviewDarkHome() {
    BloomTheme(darkTheme = true) {
        HomeScreen()
    }
}

@Preview
@Composable
fun PreviewLightHome() {
    BloomTheme {
        HomeScreen()
    }
}